<template>
	<div id="TXDD"  :style="{minHeight: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="评价" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>
		<!-- 内容 -->
		<div class="shopping">
			<div class="shop">
				<van-checkbox v-model="checked" icon-size='14px' style="width=30px"></van-checkbox>
				<img class="loge" src="../assets/images/h5页面1/h5页面_2_04.png">
				<div class="shop_text">
					<div class="shopname">春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长</div>
					<div class="jiage"><span>￥</span> 2000.0</div>

				</div>
				<div class="num"> * 1</div>
			</div>
		</div>
		<!-- 评价 -->
		<div class="appraise">
			<van-field v-model="message" rows="1"  type="textarea" placeholder="请输入留言" autosize:ture/>
			<div class="appraise_img">
				<img src="../assets/images/全部评价/pic_01.png">
				<img src="../assets/images/全部评价/pic_02.png">
			 	<img src="../assets/images/全部评价/pic_03.png">
			<van-uploader :after-read="afterRead" preview-size="50px" />

			</div>
		</div>
		<!-- 评分 -->
		<div class="grade">
			<div class="grade_one">给商品评价</div>
			<div class="two">
				<div class="two_text">产品质量</div>
				<van-rate v-model="value1" size='20px' color="blue" gutter='25px' void-color='grey' />
			</div>
			<div class="two">
				<div class="two_text">售后服务</div>
				<van-rate v-model="value2" size='20px' color="blue" gutter='25px' void-color='grey' />
			</div>
			<div class="two">
				<div class="two_text">产品质量</div>
				<van-rate v-model="value3" size='20px' color="blue" gutter='25px' void-color='grey' />
			</div>
		</div>

		<!-- 保存 -->
		
			<div class="save">
				<div is-link  @click="showPopup">提交</div>
			</div>


		<van-popup v-model="show">
			<div class="popp">
				<div class="pop">
					<img class="pop_img" src="../assets/images/评价&评价点击分享/icon_01.png">
					<div class="pop_two">
						<div><img src="../assets/images/评价&评价点击分享/icon_02.png"></div>
					</div>
					<div class="pop_three">
						感谢您的体验和评价，立即分享至微信朋友圈，即可成为比朗代言人，推荐好友成功消费，可获代言费现金奖励。
					</div>
					<div class="pop_four">
						<div class="four_one"><img src="../assets/images/评价&评价点击分享/icon_03.png">转发给朋友</div>
						<div class="four_two">|</div>
						<div class="four_one"><img src="../assets/images/评价&评价点击分享/icon_04.png">发送到朋友圈</div>
					</div>
				</div>
			</div>	
		</van-popup>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				message: '',
				value1: 1,
				value2: 1,
				value3: 1,
				checked: false,
				active: 2,
				currHeight: ''
			}
		},
		methods: {
			showPopup() {
				this.show = true;
			},
			afterRead(file) {
				// 此时可以自行将文件上传至服务器
				console.log(file);
			},
		onClickLeft() {
			
			this.$router.go(-1)
			},
		onClickRight() {
			
			},
		},
		mounted(){
		    this.currHeight = document.documentElement.clientHeight
		    window.onresize = () => {
		        this.currHeight = document.documentElement.clientHeight
		    }
		}
	};
</script>
<style scoped lang="less">
	#TXDD {
		background: #F3F4F6;
		width: 100%;
	}
	.van-field__control{
		height:40%;
	}
	// 内容
	.shopping {
		padding-top: 80px;
		width: 100%;

		.shop {
			width: 100%;
			height: 210px;
			background: white;
			margin-top: 18px;
			box-sizing: border-box;
			padding: 30px 20px 30px 24px;
			display: flex;
			justify-content: space-between;

			.num {
				font-size: 20px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}

			.van-checkbox {
				width: 40px;
			}

			.del {
				width: 26px;
				background: #FFFFFF;
			}

			.loge {
				margin-left: 20px;
				height: 150px;
			}

			.shop_text {
				width: 56.3%;
				margin-left: 28px;

				.shop_loge {
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
				}

				.shopname {
					font-size: 20px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #666666;
				}

				.jiage {
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: bold;
					color: #234497;
				}

				span {
					color: blue;
					display: inline-block;
				}
			}
		}
	}

	//评价
	.appraise {
		position: relative;
		margin-top: 40px;
		width: 100%;
		height: 450px;
		background: white;
		box-sizing: border-box;
		padding: 27px 30px 27px 30px;

		.appraise_img {
			position: absolute;
			bottom: 20px;

			img {
				height: 110px;
			}
		}
	}

	// 打分
	.grade {
		margin-top: 40px;
		width: 100%;
		background: white;
		box-sizing: border-box;
		overflow: hidden;
		padding: 27px 30px 27px 30px;

		.grade_one {
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #333333;
			line-height: 24px;
		}

		.two {
			margin-top: 50px;
			display: flex;
			justify-content: flex-start;

			.two_text {
				margin-right: 20px;
				margin-top: 10px;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				line-height: 24px;
			}
		}
	}

	// 保存
	.save {
		width: 92%;
		margin: 0 auto;
		height: 101px;
		background: #234497;
		border-radius: 4px;
		margin-top: 9.6%;
		overflow: hidden;

		div {
			margin: 0 auto;
			margin-left: 45%;
			margin-top: 30px;
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #FFFFFF;
		}

	}

	//tanchu{
	.popp{
		width: 610px;
		background: #4C4C4C;
	}
	.pop {
		width: 590px;
		background: #4C4C4C;

		.pop_img {
			margin-left: 20%;
			margin-bottom:-15px;
			height: 70px;
		}

		.pop_two {
			width: 100%;
			height: 60px;
			background:#E6E6E6;
			border-radius: 8px 8px 0px 8px;
			border-bottom: 5px solid blue;
			position: relative;

			div {
				position: absolute;
				top: -30px;
				right: -18px;
				width: 50px;
				height: 50px;
				background: #E6E6E6;
				border-radius: 50%;

				img {
					width: 20px;
					margin-left: 15px;
					margin-bottom: 50px;
				}
			}
		}

		.pop_three {
			width: 100%;
			height: 300px;
			background: white;
			box-sizing: border-box;
			padding: 80px 40px 80px 40px;
			font-size: 28px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #333333;
			line-height: 40px;
		}

		.pop_four {
			margin-top: 56px;
			width: 100%;
			height: 90px;
			display: flex;
			justify-content: space-between;

			.four_one {
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(6, 0, 1, 0.14);
				border-radius: 4px;
				box-sizing: border-box;
				padding-left: 33px;
				padding-top: 30px;
				padding-right: 33px;
				font-size: 28px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				line-height: 20px;

				img {
					width: 30px;
					margin-right: 10px;
				}
			}

			.four_two {
				background: #4C4C4C;
			}
		}
	}
</style>
